<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的好友2</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <!-- 引入字体 -->
    <script th:src="@{/js/libs/webfontloader.min.js}"></script>
    <script>
        WebFont.load({
            google: {
                families: ['Roboto:300,400,500,700:latin']
            }
        });
    </script>
    <!-- 引入bootstrap css -->
    <link rel="stylesheet" type="text/css" th:href="@{/Bootstrap/dist/css/bootstrap-reboot.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/Bootstrap/dist/css/bootstrap.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/Bootstrap/dist/css/bootstrap-grid.css}">
    <!-- 引入主要 css -->
    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/fonts.min.css}">
</head>
<body class="page-has-left-panels">
<!--<h2>个人信息</h2>-->
<!--<p th:text="${session.user}"></p><br>-->

<!--<h2>我的好友</h2>-->
<!--<table>-->
<!--    <tr th:each="friend : ${theFriends}">-->
<!--        <td th:text="${friend.account}"></td>-->
<!--        <td th:text="${friend.uname}"></td>-->
<!--        <td th:text="${friend.description}"></td>-->
<!--    </tr>-->
<!--</table>-->

<!-- Preloader 预加载 -->
<div id="hellopreloader">
    <div class="preloader">
        <svg width="45" height="45" stroke="#fff">
            <g fill="none" fill-rule="evenodd" stroke-width="2" transform="translate(1 1)">
                <circle cx="22" cy="22" r="6" stroke="none">
                    <animate attributeName="r" begin="1.5s" calcMode="linear" dur="3s" repeatCount="indefinite"
                             values="6;22"/>
                    <animate attributeName="stroke-opacity" begin="1.5s" calcMode="linear" dur="3s"
                             repeatCount="indefinite" values="1;0"/>
                    <animate attributeName="stroke-width" begin="1.5s" calcMode="linear" dur="3s"
                             repeatCount="indefinite" values="2;0"/>
                </circle>
                <circle cx="22" cy="22" r="6" stroke="none">
                    <animate attributeName="r" begin="3s" calcMode="linear" dur="3s" repeatCount="indefinite"
                             values="6;22"/>
                    <animate attributeName="stroke-opacity" begin="3s" calcMode="linear" dur="3s"
                             repeatCount="indefinite" values="1;0"/>
                    <animate attributeName="stroke-width" begin="3s" calcMode="linear" dur="3s" repeatCount="indefinite"
                             values="2;0"/>
                </circle>
                <circle cx="22" cy="22" r="8">
                    <animate attributeName="r" begin="0s" calcMode="linear" dur="1.5s" repeatCount="indefinite"
                             values="6;1;2;3;4;5;6"/>
                </circle>
            </g>
        </svg>
        <div class="text">Loading ...</div>
    </div>
</div>
<!-- ... end Preloader 结束预加载-->
<!-- Fixed Sidebar Left 左侧菜单 -->
<div class="fixed-sidebar">
    <!--折叠时左侧菜单-->
    <div class="fixed-sidebar-left sidebar--small" id="sidebar-left">
        <a href="02-ProfilePage.html" class="logo">
            <div class="img-wrap">
                <img th:src="@{/img/logo.png}" alt="Olympus">
            </div>
        </a>
        <div class="mCustomScrollbar" data-mcs-theme="dark">
            <ul class="left-menu">
                <!--切换菜单栏-->
                <li>
                    <a href="#" class="js-sidebar-open">
                        <svg class="olymp-menu-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                             data-original-title="切换菜单栏">
                            <use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-menu-icon"></use>
                        </svg>
                    </a>
                </li>
                <!--新闻广场-->
                <li>
                    <a href="03-NewsSquare.html">
                        <svg class="olymp-newsfeed-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                             data-original-title="新闻广场">
                            <use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-newsfeed-icon"></use>
                        </svg>
                    </a>
                </li>
                <!--好友动态-->
                <li>
                    <a href="04-FriendSquare.html">
                        <svg class="olymp-star-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                             data-original-title="好友动态">
                            <use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-star-icon"></use>
                        </svg>
                    </a>
                </li>
                <!--个人中心-->
                <li>
                    <a href="05-PersonDetail.html">
                        <svg class="olymp-manage-widgets-icon left-menu-icon" data-toggle="tooltip"
                             data-placement="right" data-original-title="个人中心">
                            <use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-manage-widgets-icon"></use>
                        </svg>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!--end折叠时左侧菜单-->
    <!--展开时左侧菜单-->
    <div class="fixed-sidebar-left sidebar--large" id="sidebar-left-1">
        <a href="02-ProfilePage.html" class="logo">
            <div class="img-wrap">
                <img th:src="@{/img/logo.png}" alt="Olympus">
            </div>
            <div class="title-block">
                <h6 class="logo-title">olympus</h6>
            </div>
        </a>
        <div class="mCustomScrollbar" data-mcs-theme="dark">
            <ul class="left-menu">
                <!--切换菜单栏-->
                <li>
                    <a href="#" class="js-sidebar-open">
                        <svg class="olymp-close-icon left-menu-icon">
                            <use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-close-icon"></use>
                        </svg>
                        <span class="left-menu-title">切换菜单栏</span>
                    </a>
                </li>
                <!--新闻广场-->
                <li>
                    <a href="03-NewsSquare.html">
                        <svg class="olymp-newsfeed-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                             data-original-title="">
                            <use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-newsfeed-icon"></use>
                        </svg>
                        <span class="left-menu-title">新闻广场</span>
                    </a>
                </li>
                <!--好友动态-->
                <li>
                    <a href="04-FriendSquare.html">
                        <svg class="olymp-star-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                             data-original-title="">
                            <use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-star-icon"></use>
                        </svg>
                        <span class="left-menu-title">好友动态</span>
                    </a>
                </li>
                <!--个人中心-->
                <li>
                    <a href="05-PersonDetail.html">
                        <svg class="olymp-manage-widgets-icon left-menu-icon" data-toggle="tooltip"
                             data-placement="right" data-original-title="">
                            <use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-manage-widgets-icon"></use>
                        </svg>
                        <span class="left-menu-title">个人中心</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!--end展开时左侧菜单-->
</div>
<!-- ... end Fixed Sidebar Left 结束左侧菜单-->
<!-- Header-BP 头部导航栏-->
<div th:replace="headNav :: headNav"></div>
<!-- ... end Header-BP 结束头部导航栏-->
<!--头部空间-->
<div class="header-spacer"></div>
<!--end头部空间-->
<!-- Top Header-Profile 个人主页头部-->
<div class="container">
    <div class="row">
        <div class="col col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <div class="ui-block">
                <div class="top-header">
                    <!--默认个人主页头部背景-->
                    <div class="top-header-thumb">
                        <img th:src="@{/img/top-header1.jpg}" alt="nature">
                    </div>
                    <div class="profile-section">
                        <div class="row">
                            <div class="col col-lg-5 col-md-5 col-sm-12 col-12">
                                <ul class="profile-menu">
                                    <li>
                                        <a href="06-ProfilePage-Friends.html">好友</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="col col-lg-5 ml-auto col-md-5 col-sm-12 col-12">
                                <ul class="profile-menu">
                                    <li>
                                        <a href="07-ProfilePage-Photos.html">相册</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="control-block-button">
                            <!--事件：发送好友请求/button-->
                            <button class="accept-request bg-blue" title="加为好友">
                                <svg class="olymp-happy-face-icon">
                                    <use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-happy-face-icon"></use>
                                </svg>
                            </button>
                            <!--事件：建立私信页面/button-->
                            <button class="accept-request bg-purple" title="私信">
                                <svg class="olymp-chat---messages-icon">
                                    <use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-chat---messages-icon"></use>
                                </svg>
                            </button>
                        </div>
                    </div>
                    <div class="top-header-author">
                        <!--数据：用户头像、用户昵称-->
                        <a href="02-ProfilePage.html" class="author-thumb">
                            <img th:src="@{/img/author-main1.jpg}" alt="author">
                        </a>
                        <div class="author-content">
                            <a href="02-ProfilePage.html" class="h4 author-name">James Spiegel</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ... end Top Header-Profile 结束个人主页头部-->
<!--个人主页-好友主体头部-->
<div class="container">
    <div class="row">
        <div class="col col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <div class="ui-block responsive-flex">
                <div class="ui-block-title">
                    <!--数据：好友数-->
                    <div class="h6 title">好友数目 (86)</div>
                    <!--数据：搜索条件、返回结果-->
                    <!--不需要就注释该表单-->
                    <form class="w-search">
                        <div class="form-group with-button">
                            <input class="form-control" type="text" placeholder="Search Friends...">
                            <!--处理事件查询-->
                            <button>
                                <svg class="olymp-magnifying-glass-icon">
                                    <use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-magnifying-glass-icon"></use>
                                </svg>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 结束个人主页-好友主体头部 -->
<!--个人主页-好友卡片列表-->
<p th:text="${theFriends}"></p>
<p th:text="${theFriends[0].uname}"></p>
<!--<ul th:each="friend : ${theFriends}">-->
<!--	<li th:text="${friend.uanme}"></li>-->
<!--</ul>-->
<!--<table>-->
<!--    <tr th:each="friend : ${theFriends}">-->
<!--        <td th:text="${friend.account}"></td>-->
<!--        <td th:text="${friend.uname}"></td>-->
<!--        <td th:text="${friend.description}"></td>-->
<!--    </tr>-->
<!--</table>-->

<div class="container">
    <div class="row">
        <!--单个好友卡片-->
        <!--数据：好友头像、昵称、个人主页链接、照片数、动态数-->
        <div class="col col-xl-3 col-lg-6 col-md-6 col-sm-6 col-12">
            <div class="ui-block">
                <div class="friend-item">
                    <div class="friend-header-thumb">
                        <!--默认背景-->
                        <img th:src="@{/img/friend1.jpg}" alt="好友卡片背景">
                    </div>
                    <div class="friend-item-content">
                        <div class="friend-avatar">
                            <div class="author-thumb">
                                <img th:src="@{/img/avatar1.jpg}" alt="好友头像">
                            </div>
                            <div class="author-content">
                                <a href="02-ProfilePage.html" class="h5 author-name">Nicholas Grissom</a>
                            </div>
                        </div>
                        <div class="friend-count">
                            <div class="friend-count-item">
                                <div class="h6">240</div>
                                <div class="title">照片</div>
                            </div>
                            <div class="friend-count-item">
                                <div class="h6">16</div>
                                <div class="title">动态</div>
                            </div>
                        </div>
                        <div class="control-block-button">
                            <!--事件：加好友-->
                            <button class="accept-request bg-blue" title="加好友">
                                <svg class="olymp-happy-face-icon">
                                    <use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-happy-face-icon"></use>
                                </svg>
                            </button>
                            <!--事件：私信-->
                            <button class="accept-request bg-purple" title="私信">
                                <svg class="olymp-chat---messages-icon">
                                    <use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-chat---messages-icon"></use>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--结束单个好友卡片-->
        <div class="col col-xl-3 col-lg-6 col-md-6 col-sm-6 col-12">
            <div class="ui-block">
                <div class="friend-item">
                    <div class="friend-header-thumb">
                        <!--默认背景-->
                        <img th:src="@{/img/friend1.jpg}" alt="好友卡片背景">
                    </div>
                    <div class="friend-item-content">
                        <div class="friend-avatar">
                            <div class="author-thumb">
                                <img th:src="@{/img/avatar1.jpg}" alt="好友头像">
                            </div>
                            <div class="author-content">
                                <a href="02-ProfilePage.html" class="h5 author-name">Nicholas Grissom</a>
                            </div>
                        </div>
                        <div class="friend-count">
                            <div class="friend-count-item">
                                <div class="h6">240</div>
                                <div class="title">照片</div>
                            </div>
                            <div class="friend-count-item">
                                <div class="h6">16</div>
                                <div class="title">动态</div>
                            </div>
                        </div>
                        <div class="control-block-button">
                            <!--事件：加好友-->
                            <button class="accept-request bg-blue" title="加好友">
                                <svg class="olymp-happy-face-icon">
                                    <use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-happy-face-icon"></use>
                                </svg>
                            </button>
                            <!--事件：私信-->
                            <button class="accept-request bg-purple" title="私信">
                                <svg class="olymp-chat---messages-icon">
                                    <use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-chat---messages-icon"></use>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col col-xl-3 col-lg-6 col-md-6 col-sm-6 col-12">
            <div class="ui-block">
                <div class="friend-item">
                    <div class="friend-header-thumb">
                        <!--默认背景-->
                        <img th:src="@{/img/friend1.jpg}" alt="好友卡片背景">
                    </div>
                    <div class="friend-item-content">
                        <div class="friend-avatar">
                            <div class="author-thumb">
                                <img th:src="@{/img/avatar1.jpg}" alt="好友头像">
                            </div>
                            <div class="author-content">
                                <a href="02-ProfilePage.html" class="h5 author-name">Nicholas Grissom</a>
                            </div>
                        </div>
                        <div class="friend-count">
                            <div class="friend-count-item">
                                <div class="h6">240</div>
                                <div class="title">照片</div>
                            </div>
                            <div class="friend-count-item">
                                <div class="h6">16</div>
                                <div class="title">动态</div>
                            </div>
                        </div>
                        <div class="control-block-button">
                            <!--事件：加好友-->
                            <button class="accept-request bg-blue" title="加好友">
                                <svg class="olymp-happy-face-icon">
                                    <use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-happy-face-icon"
                                         th:href="@{/svg-icons/sprites/icons.svg#olymp-happy-face-icon}"></use>
                                </svg>
                            </button>
                            <!--事件：私信-->
                            <button class="accept-request bg-purple" title="私信">
                                <svg class="olymp-chat---messages-icon">
                                    <use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-chat---messages-icon"
                                         th:href="@{/svg-icons/sprites/icons.svg#olymp-chat---messages-icon}"></use>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 结束个人主页-好友卡片列表 -->
<!--向上返回 按钮-->
<a class="back-to-top" href="#">
    <img th:src="@{/svg-icons/back-to-top.svg}" alt="arrow" class="back-icon">
</a>

<!-- JS Scripts -->
<!--<div th:replace="_fragment :: footer"></div>-->
<script th:src="@{/js/jQuery/jquery-3.4.1.js}"	></script>
<script th:src="@{/js/libs/jquery.appear.js}"></script>
<script th:src="@{/js/libs/jquery.mousewheel.js}"></script>
<script th:src="@{/js/libs/perfect-scrollbar.js}"></script>
<script th:src="@{/js/libs/jquery.matchHeight.js}"></script>
<script th:src="@{/js/libs/svgxuse.js}"></script>
<script th:src="@{/js/libs/imagesloaded.pkgd.js}"></script>
<script th:src="@{/js/libs/Headroom.js}"></script>
<script th:src="@{/js/libs/velocity.js}"></script>
<script th:src="@{/js/libs/ScrollMagic.js}"></script>
<script th:src="@{/js/libs/jquery.waypoints.js}"></script>
<script th:src="@{/js/libs/jquery.countTo.js}"></script>
<script th:src="@{/js/libs/popper.min.js}"></script>
<script th:src="@{/js/libs/material.min.js}"></script>
<script th:src="@{/js/libs/bootstrap-select.js}"></script>
<script th:src="@{/js/libs/smooth-scroll.js}"></script>
<script th:src="@{/js/libs/selectize.js}"></script>
<script th:src="@{/js/libs/swiper.jquery.js}"></script>
<script th:src="@{/js/libs/isotope.pkgd.js}"></script>
<script th:src="@{/js/libs/ajax-pagination.js}"></script>
<script th:src="@{/js/libs/circle-progress.js}"></script>
<script th:src="@{/js/libs/loader.js}"></script>
<script th:src="@{/js/libs/run-chart.js}"></script>
<script th:src="@{/js/libs/jquery.magnific-popup.js}"></script>
<script th:src="@{/js/libs/ion.rangeSlider.js}"></script>

<script th:src="@{/js/main.js}"></script>
<script th:src="@{/js/libs-init/libs-init.js}"></script>
<script defer th:src="@{/fonts/fontawesome-all.js}"></script>

<script th:src="@{/Bootstrap/dist/js/bootstrap.bundle.js}"></script>
</body>
</html>